<template>
  <div id="app">
    <h3>搜索</h3>
    <div class="head">
      <el-input
        prefix-icon="el-icon-search"
        placeholder="请搜索商家、商品名称"
        v-model="text"
        clearable
        style="width: 90%;"
      ></el-input>
      <b class="sumbit" @click="search">搜索</b>
    </div>
    <h4>历史搜索</h4>
    <div class="main">
      <div v-for="(item, index) in list" :key="index">
        <span>{{ item }}</span>
      </div>
    </div>
    <h4>搜索发现</h4>
    <div class="footer">
      <span>麻辣烫</span>
      <span>米线</span>
      <span>披萨</span>
      <span>蛋糕</span>
      <span>汉堡</span>
      <span>烧烤</span>
      <span>烤肉拌饭</span>
      <span>炸鸡</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      list: [],
    };
  },
  methods: {
    search() {
      if (this.text) {
        this.list.unshift(this.text);
        this.text = "";
      }
    },
  },
};
</script>

<style scoped>
.head {
    display: flex;
    justify-content: space-around;
}
.main {
  display: flex;
}

.footer {
  display: flex;
  flex-wrap: wrap;
}

span {
  height: 30px;
  line-height: 30px;
  padding: 0 4px;
  font-size: 14px;
  background-color: rgb(210, 207, 207);
  margin: 5px;
  display: block;
}

.sumbit {
  background-color: #fff;
  color: rgb(42, 140, 189);
  font-size: 16px;
  line-height: 40px;
}
</style>